<template>
	<view class="code-page">

		<view class="code-tbody">
			<text class="code-ts">请调节屏幕亮度，将二维出事给店员扫码</text>
			<view class="code-img">
				<l-qrcode :value="verificationCode" />
			</view>
			<!-- <view class="button">
				<uv-button type="primary" color="#5ebcbc" :customStyle="{'border-radius':'30rpx'}"
					@click="gotoCode()">保存到手机</uv-button>
			</view> -->
			<view class="code-bh" @click="eyeClick()">
				<template v-if="eyeType">
					<text>{{verificationCode}}</text>
					<uv-icon name="eye-off" color="#999" size="28"></uv-icon>
				</template>
				<template v-else>
					<text>****</text>
					<uv-icon name="eye-fill" color="#999" size="28"></uv-icon>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs';
	export default {
		data() {
			return {
				eyeType: false,
				verificationCode:12,//核销码
			}
		},
		onLoad(e) {
			this.verificationCode=e.verificationCode
		},
		mounted() {
			this.generateQRCode()
		},
		methods: {
			downloadCode() {
				console.log('下载二维码')
			},
			eyeClick() {
				this.eyeType = !this.eyeType
			},
			generateQRCode() {
			      // 创建实例
			      const qr = new UQRCode();
			      // 设置二维码内容
			      qr.data = '111';
			      // 设置二维码大小
			      qr.size = 200;
			      // 设置二维码前景色和背景色
			      qr.foregroundColor = '#000000';
			      qr.backgroundColor = '#ffffff';
			      // 设置边距
			      qr.margin = 10;
			      // 设置纠错等级
			      qr.errorCorrectLevel = UQRCode.errorCorrectLevel.H;
			      
			      // 调用制作二维码方法
			      qr.make();
			      
			      // 获取canvas上下文
			      const ctx = uni.createCanvasContext('qrcode', this);
			      
			      // 设置二维码图案
			      qr.canvasContext = ctx;
			      
			      // 绘制二维码
			      qr.drawCanvas();
			    }
		}
	}
</script>

<style scoped lang="less">
	.code-page {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.code-tbody {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		padding-bottom: 0px;
		box-sizing: border-box;
		text-align: center;

		.code-ts {
			color: #333333;
			text-align: center;
		}

		.code-img {
			width: 350rpx;
			height:  350rpx;
			margin: 20px auto;
		}

		.code-bh {
			margin-top: 30rpx;
			display: flex;
			height: 122rpx;
			align-items: center;
			justify-content: center;
			color: #666;
			border-top: 1px dashed #f1f1f1;
			text{
				margin-right: 10rpx;
			}
		}

	}
</style>